<template>
  <el-skeleton  :loading="props.isLoading" animated>
    <template #template>
    </template>
    <template v-slot:default>
      <el-tabs v-if="state.isData" v-for="item in state.data"  @click="method.articleToDetail(item.id)" >
        <div class="entry-list row">
          <!--  左文字说明部分 begin   -->
          <div class="col-9" >
            <div class="contents" >
              <div class="title" >{{item.title}}</div>
              <div class="synopsis">{{item.synopsis}}</div>
              <div class="entry-footer">
                <div class="align-items-center py-2 white-space-nowrap" style="font-size: 12px;color: #6C757D" >
                  <span> <el-icon><Pointer /></el-icon> 点赞：{{item.likes}}</span> <span class="text-muted mx-2 h-14px w-2px bg-light">|</span>
                  <span> <el-icon><Discount /></el-icon> 标签： <a v-for="item2 in item.labels"  :key="item.labels.id" style="margin-left: 5px; color: #40a9ff"> {{item2.label}}</a>   </span> <span class="text-muted mx-2 h-14px w-2px bg-light">|</span>
                  <span> <el-icon><Calendar /></el-icon> 时间：{{formatDateTime(item.createTime)}}</span><span class="text-muted mx-2 h-14px w-2px bg-light">|</span>
                  <span> <el-icon><View /></el-icon> 访问：{{item.views}}</span>
                </div>

              </div>
            </div>
          </div>
          <!--  左文字说明部分 end    -->
          <!--  封面图 begin    -->
          <div class="col-3">
            <div class="image" >
              <el-image :src="formatUrl(item.covers)"  alt="404NotFound"/>
            </div>
          </div>
          <!--  封面图 end    -->
        </div>
      </el-tabs>
      <empty v-else></empty>
    </template>
  </el-skeleton>
</template>

<script setup>
import {onMounted, reactive,watch} from "vue";
import {formatDateTime, formatUrl} from "@/utils/tools/format";
import Empty from "@/components/empty/empty.vue";
import {Calendar, Discount, Pointer, View} from "@element-plus/icons-vue";
import router from "@/router";
import {inisHelper} from "@/utils/helper";
const props = defineProps({
  data:{
    type: [Array, Object],
    required: true,
    // default: []
  },
  isLoading:{
    type: Boolean,
    default: true
  }
})
const state  = reactive({
  data:{}, //存放数据
  isData:false, //判断是否有数据
})
const method ={
  init(){

  },
  // 跳转到文章详情
  articleToDetail:(id)=>{
    router.push({
      path:"/index/article/detail",
      query:{
        id:id
      }
    })
  },
}
// 监听传入数据
watch(()=>props.data,(newValue)=>{
  if(!inisHelper.is.empty(newValue)){
    state.isData =true;
    state.data = newValue;
    console.log(state.data)
  }else {
    state.isData = false;
  }
})
// 监听传入数据
watch(()=>props.isLoading,(newValue)=>{
  props.isLoading = newValue;
})

onMounted(()=>{
  method.init();
})

</script>

<style scoped>
.entry-list{
  padding: 12px 20px 0;
  border-bottom: 1px solid #e4e6eb80;
}
.image{
  max-width: 100%;
  max-height: 100%
}
.image >>>el-image{
  height: 110px;
  width: 74px;
}

.title{
  font-weight: bolder;
  font-size: 16px;
  line-height: 24px;
}
.synopsis{
  color: #8a919f;
  font-size: 13px;
  line-height: 22px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

</style>
